﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadVoide.aspx.cs" Inherits="AiXiu.WebSite.UploadVoide" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    <title>上传视频</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <style>
        #form1 {
            background-color: #EEE;
        }

            #form1 > div {
                margin-bottom: 10px;
            }

            .pv, #form1 textarea {
                background-color: white;
            }

        .pv {
            padding: 10px;
        }

        .pm {
            margin: 8px;
        }

        #publish {
            background-color: #007aff;
            color: #fff;
            border-radius: 5px;
            font-size: 18px;
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a href="MyInfo.aspx" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">上传视频</h1>
    </header>
    <div class="mui-content">
        <form id="form1" class="mui-input-group">
            <div>
                <div class="mui-card-header">选择视频</div>
                <div class="mui-card-content pv">
                    <p>
                        <input type="file" id="file_video" />
                    </p>
                    <p><span class="progress">上传进度: <i id="auth-progress">0</i> %</span></p>
                </div>
            </div>
            <div>
                <div class="mui-card-header">视频标题</div>
                <textarea class="mui-card-content" placeholder="完善视频标题，能让更多人看到~" maxlength="100" id="headline"></textarea>
            </div>
            <div>
                <div class="mui-card-header">当前位置<span id="address">未选择</span></div>
                <div class="mui-card-content" id="pois">
                </div>
            </div>
            <div>
                <input type="button" value="上传发布" id="publish" />
            </div>
        </form>
    </div>  
    <script src="Content/Aliyun/es6-promise.min.js"></script>
    <script src="Content/Aliyun/aliyun-upload-sdk-1.5.2.min.js"></script>
    <script src="Content/Aliyun/aliyun-oss-sdk-6.13.0.min.js"></script>
    <script src="Content/mui/js/jquery.js"></script>
    <script>
        // 调用百度地图API获取附近地点
        //1、通过ak秘钥调用百度地图api，回调方法callback为initialize
        var mapAK = 'PyQnPtRHQcKmoeLV6BLvVWETAAACHby3';//ak密钥
        window.onload = function () {
            // 异步加载Web服务API
            var mapScript = document.createElement("script");
            mapScript.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + mapAK + '&callback=initialize';
            document.body.appendChild(mapScript);
        }

        //2、调用地图检索API检索地点，回调方法callback为showpois
        //initialize——调用百度地图API获取附近地点后的回调方法,获取附近地点
        function initialize() {
            var geolocation = new BMap.Geolocation();
            // 获取当前设备定位/IP定位
            geolocation.getCurrentPosition(function (r) {

                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    // 异步加载地图检索API(地点检索)
                    var poiScript = document.createElement("script");
                    poiScript.src = 'http://api.map.baidu.com/place/v2/search' +
                        '?query=美食$酒店$购物$丽人$旅游景点$休闲娱乐$运动健身$文化传媒$交通设施$公司企业' +
                        '&location=' + r.point.lat + ',' + r.point.lng +
                        '&radius=100' +
                        '&output=json' +
                        '&ak=' + mapAK +
                        '&callback=showpois';
                    document.body.appendChild(poiScript);
                }
                else {
                    alert('failed' + this.getStatus());
                }
            });
        }

        //showpois—地图检索API加载完成执行的回调方法
        function showpois(data) {
            console.log(data);
            for (var i = 0; i < data.results.length; i++) {
                $('#pois').append($('<div class="pm mui-btn"><div class="chip-label">' + data.results[i].name + '</div></div>'));
            }
        }

        $('#pois').on('click', '.chip-label', function () {
            $(this).parent().css('background-color', '#007aff').css('color', '#fff').siblings().css('background-color', '#fff').css('color', '#000');
            $("#address").text($(this).text());
        })
    </script>
    <script>

        $(document).ready(function () {

            var uploader = null

            // 第一种方式 UploadAuth 上传 
            $('#publish').on('click', function () {
                var file = $('#file_video')[0].files[0];
                if (!file) {
                    alert("请先选择需要上传的文件!")
                    return
                }
                var userData = '{"Vod":{}}'
                if (uploader) {
                    uploader.stopUpload()
                    // 重置进度条位置
                    $('#auth-progress').text('0')
                }
                var filename = $('#file_video').val();
                var headline = $('#headline').val();
                var location = $('#address').text();
                // 请求上传凭证
                //encodeURIComponent()：因为在作用与url当作参数传递的时候，如参数出现空格这样的特殊字段，后台只可以读取到空格前的内容，后面内容丢失，造成数据读取失败，但是如果用encodeURIComponent()包裹一下，那会将这些特殊字符进行转义，这样后台就可以成功读取了，所以encodeURIComponent()用于url作为参数传递的场景中使用
                var params = {
                    filename: encodeURIComponent(filename),
                    headline: headline ? encodeURIComponent(headline) : null,
                    location: location ? encodeURIComponent(location) : null
                }
                $.get("UploadVideo.ashx", params, function (data) {
                    console.log(data);
                    var res = $.parseJSON(data);
                    uploader = createUploader(res.VideoId, res.UploadAddress, res.UploadAuth);
                    // 添加视频
                    uploader.addFile(file, null, null, null, userData);
                    $('#file_video').attr('disabled', true);
                    // 开始上传
                    if (uploader != null) {
                        // 开始上传
                        uploader.startUpload();
                    }
                })

            })


            /** 
             * 创建一个上传对象
             * 使用 UploadAuth 上传方式
             */
            function createUploader(videoId, uploadAddress, uploadAuth) {
                var uploader = new AliyunUpload.Vod({
                    region: '<% = ConfigurationManager.AppSettings["aliyun:RegionId"] %>',
                    userId: '<% = ConfigurationManager.AppSettings["aliyun:UserId"] %>',
                    // 添加文件成功
                    addFileSuccess: function (uploadInfo) {
                        //console.log('添加文件成功，等待上传...');
                    },
                    // 开始上传
                    onUploadstarted: function (uploadInfo) {
                        uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                    },
                    // 文件上传成功
                    onUploadSucceed: function (uploadInfo) {
                        alert("上传成功")
                        //mui.alert('上传成功！', 'Hello MUI', function () {
                        //    window.location.href = '/Default.aspx';
                        //});

                    },
                    // 文件上传失败
                    onUploadFailed: function (uploadInfo, code, message) {
                        alert(message + ' 错误码：' + code);
                    },

                    // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
                    onUploadProgress: function (uploadInfo, totalSize, progress) {
                        var progressPercent = Math.ceil(progress * 100)
                        $('#auth-progress').text(progressPercent)
                    },

                })
                return uploader
            }
        })
    </script>
</body>
</html>
